<!--  -->
<template>
  <div class="login">
    <!-- 整体背景图 -->
    <span class="bg">
      <img :src="datas.admin_login_image" alt />
    </span>
    <!-- 蒙版遮罩 -->
    <div class="shade"></div>
    <div class="content" :style="'height:' + heights + ';'">
      <div class="left" v-if="is_ok">
        <!-- <img src="../assets//img/avator.jpg" alt /> -->
      </div>
      <div class="from">
        <h2>{{datas.admin_login_title}}</h2>
        <span class="text">Welcome</span>
        <span class="name">
          <input type="text" placeholder="请输入用户名" v-model="account" />
          <!-- <span class="check">√</span> -->
        </span>
        <span class="pass">
          <input
            :type="types"
            placeholder="请输入用户密码"
            v-model="passwords"
          />
          <span class="check" v-if="!eye_ok" @click="co_eye">
            <img src="../assets/img/close_eye.png" alt />
          </span>
          <span class="check" v-else @click="co_eye">
            <img src="../assets/img/open_eye.png" alt />
          </span>
        </span>
        <div class="but">
          <el-switch
            v-model="value"
            active-value="1"
            inactive-value="0"
            active-text="持续登录"
            inactive-text="正常登录"
            active-color="#8c98cc"
          ></el-switch>
          <span class="log" @click="submitForm()">登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: "", //账户名
      passwords: "", //密码
      eye_ok: false, //判断眼睛开闭
      is_ok: true, //自适应左边logo显示
      types: "password", //展示密码框的状态
      heights: "", //高度适配
      value: "0", //开关按钮设置值
      datas:'',//登录页面信息
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    let width = localStorage.getItem("width_l");
    let height = localStorage.getItem("height_l");
    if (width != "" && width != undefined && width != null) {
      if (width <= 1100) {
        this.is_ok = false;
      } else {
        this.is_ok = true;
      }
    }
    if (height != "" && height != undefined && height != null) {
      if (height <= 790) {
        this.heights = "400px";
      } else {
        this.heights = "60vh";
      }
    }
    if (JSON.parse(localStorage.getItem("myself")).token != undefined) {
      this.$router.push("/manage");
    }
  },
    beforeDestroy() {
    document.onkeydown =  e => {
     var theEvent = window.event || e;
      var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
      if (code == 13) {
        console.log('123')
      }
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    //监听页面宽度
    window.onresize = () => {
      this.$store.commit("Gwidth", document.body.clientWidth);
      this.$store.commit("Gheight", document.body.clientHeight);
    };
    //监听回车事件
    document.onkeydown = e => {
      var theEvent = window.event || e;
      var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
      if (code == 13) {
        this.submitForm();
      }
    };
    //获取登录背景图
    this.$api
      .getLoginInfo({})
      .then(res => {
        console.log(res);
        this.datas = res.data;
      })
      .catch(res => {
        console.log(res);
      });
  },
  methods: {
    //点击眼睛
    co_eye() {
      this.eye_ok = !this.eye_ok;
      if (!this.eye_ok) {
        this.types = "password";
      } else {
        this.types = "text";
      }
    },
    //点击登录
    submitForm() {
      let datas = {
        account: this.account,
        pwd: this.passwords,
        type: this.value
      };
      this.$api
        .Login(datas)
        .then(res => {
          console.log(res);
          if (res.code == 10000) {
            this.$message({
              showClose: true,
              message: res.message,
              type: "success"
            });
            localStorage.setItem("myself", JSON.stringify(res.data.adminInfo)); //存储个人信息
            console.log(res.data.adminInfo);
            localStorage.setItem("menus", JSON.stringify(res.data.menus)); //菜单数据
            this.$router.push("/manage");
          } else {
            this.$message({
              showClose: true,
              message: "未知错误",
              type: "warning"
            });
          }
        })
        .catch(res => {
          console.log(res);
        });
      //
    }
  },
  computed: {
    clientWidth() {
      return this.$store.getters.cwidth; //当前页面宽度
    },
    clientHeight() {
      return this.$store.getters.cheight; //当前页面宽度
    }
  },
  watch: {
    clientWidth(newval) {
      //监听页面宽度
      //   console.log(newval);
      localStorage.setItem("width_l", newval);
      if (newval <= 1100) {
        this.is_ok = false;
      } else {
        this.is_ok = true;
      }
    },
    clientHeight(newval) {
      localStorage.setItem("height_l", newval);
      //   console.log(newval);
      if (newval <= 790) {
        this.heights = "400px";
      } else {
        this.heights = "60vh";
      }
    }
  }
};
</script>
<style scoped>
.login {
  display: flex;
  min-height: 100vh;
  overflow-y: auto;
  width: 100%;
  background: #2d3a4b;
  justify-content: center;
  position: relative;
}
.bg {
  height: 100vh;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}
.bg img {
  display: block;
  width: 100%;
  height: 100vh;
}
.content {
  display: flex;
  width: 60%;
  height: 60vh;
  position: absolute;
  left: 20%;
  top: 20vh;
  z-index: 100;
}
.left {
  width: 60%;
  height: 100%;
  background: rgba(168, 192, 226, 0.5);
  display: flex;
  justify-content: center;
}
.left img {
  display: block;
  width: 73px;
  height: 73px;
  margin-top: 68px;
}
.shade {
  width: 100%;
  height: 100vh;
  /* background: rgba(55, 66, 94, 0.8); */
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
}
.from {
  display: flex;
  flex: 1;
  height: 100%;
  background: #fff;
  flex-direction: column;
}
.check {
  display: block;
  transform: translateX();
}
.check img {
  display: block;
  width: 20px;
  height: 20px;
}
h2 {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #a7a1cf;
  margin-top: 12vh;
  font-size: 40px;
  font-weight: 200;
}
.text {
  display: block;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e3e3e3;
}
.name,
.pass {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
input {
  display: block;
  width: 75%;
  height: 30px;
  padding-bottom: 10px;
  outline: none;
  border: transparent;
  border-bottom: 1px solid #e3e3e3;
  text-align: center;
  background: #fff;
  font-size: 16px;
  color: #1b1a1a;
}
.log {
  width: 70%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
  background: #8c98cc;
  border-radius: 20px;
}
.but {
  width: 100%;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #979797;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #979797;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #979797;
}
</style>